<template>
  <div class="tabs-container">
    <transition>
      <div class="tab-left" v-show="!isShowTabs">
        <!-- <i class="iconfont icon-a-doubleleft" style="font-size: 20px;margin-right: 4px;"></i> -->
        <a-tabs :active-key="activeKey" hide-add type="editable-card" @change="changePage" @edit="editTabItem"
          class="tab-box">
          <a-tab-pane v-for="(pageItem, index) in tabsList" :key="pageItem.fullPath" Vpath="pageItem.fullPath"
            :closable="(pageItem.fullPath) && pageItem.fullPath !== '/content/index'">
            <template #tab>
              <a-dropdown :trigger="['contextmenu']">
                <div style="display: inline-block">
                  <TitleI18n :title="pageItem.meta && pageItem.meta.title ? pageItem.meta.title : pageItem.name" />
                </div>
                <template #overlay>
                  <a-menu style="user-select: none">
                    <a-menu-item key="1" :disabled="activeKey !== pageItem.fullPath" @click="reloadPage">
                      刷新
                    </a-menu-item>
                    <a-menu-item key="2" @click="removeTab(pageItem)">
                      关闭当前
                    </a-menu-item>
                    <a-menu-item key="3" @click="closeOther(pageItem)">
                      关闭其他
                    </a-menu-item>
                    <a-menu-item key="5" @click="closeAll"> 关闭全部 </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-tab-pane>
        </a-tabs>
        <!-- <i v-show="!isShowTabs" class="iconfont icon-a-doubleright" style="font-size: 20px;"></i> -->
      </div>
    </transition>

    <!-- <div class="open-tabs" @click="openorhideTabs">
      <i v-if="isShowTabs" class="iconfont icon-a-doubledown" style="font-size: 20px"></i>
      <i v-else class="iconfont icon-a-doubleup" style="font-size: 20px"></i>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { computed, unref, watch, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";

import { message } from "ant-design-vue";
import type { RouteLocation } from "vue-router";
import { Storage } from "@/utils/Storage";
// import { TABS_ROUTES } from '@/enums/cacheEnum';
import { useTabsViewStore, blackList } from "@/store/modules/tabsView";
import { useKeepAliveStore } from "@/store/modules/keepAlive";
import { REDIRECT_NAME } from "@/router/constant";
import { TitleI18n } from "@/components/title-i18n";
import type { TabsProps } from "ant-design-vue";

//type
interface RouteItem {
  [propsName: string]: any;
}

//data
const route: any = useRoute();
const router = useRouter();
const tabsViewStore = useTabsViewStore();
const keepAliveStore = useKeepAliveStore();
const isShowTabs = ref<boolean>(false); //展示是否现实和隐藏tab页
const activeKey = computed(() => tabsViewStore.getCurrentTab?.fullPath);

// 获取简易的路由对象
const getSimpleRoute = (route: RouteItem) => {
  const { fullPath, hash, meta, name, params, path, query } = route;
  return { fullPath, hash, meta, name, params, path, query };
};

let routes: any[] = [];
try {
  const routesStr: any = Storage.get("TABS_ROUTES") as string | null | undefined;
  routes = JSON.parse(routesStr)?.length
    ? JSON.parse(routesStr)
    : [getSimpleRoute(route)];
} catch (e) {
  routes = [getSimpleRoute(route)];
}

// 初始化标签页
tabsViewStore.initTabs(routes);

// 在页面关闭或刷新之前，保存数据
window.addEventListener("beforeunload", () => {
  Storage.set("TABS_ROUTES", JSON.stringify(tabsList.value));
});

// //展示或隐藏tab标签
// const openorhideTabs = () => {
//   isShowTabs.value = !isShowTabs.value;
// };

// 目标路由是否等于当前路由
const isCurrentRoute = (route: RouteItem) => {

  return router.currentRoute.value.matched.some(
    (item: RouteItem) => item.path === route.fullPath
  );
};

// 关闭当前页面
const removeTab = (route: any) => {
  if (route.fullPath === "/content/index") {
    return message.warning("内容不能关闭");
  }
  // tabsViewMutations.closeCurrentTabs(route)
  tabsViewStore.closeCurrentTab(route);
  nextTick(() => {
    Storage.set("TABS_ROUTES", JSON.stringify(tabsList.value));
  })

};
// tabs 编辑（remove || add）
const editTabItem = (targetKey: any, action: string) => {
  if (action == "remove") {
    removeTab(
      tabsList.value.find((item: RouteItem) => item.fullPath == targetKey) as any
    );
    Storage.set("TABS_ROUTES", JSON.stringify(tabsList.value));
  }
};
// 切换页面
const changePage = (key: string) => {
  Object.is(route.fullPath, key) || router.push(key);
};
// 刷新页面
const reloadPage = () => {
  router.go(0);
};

// 关闭其他
const closeOther = (route: any) => {
  tabsViewStore.closeOtherTabs(route);
  !isCurrentRoute(route) && router.replace(route.fullPath);
};

// 关闭全部
const closeAll = () => {
  localStorage.removeItem("routes");
  tabsViewStore.closeAllTabs();
  router.replace("/");
};

//computed

// 标签页列表
const tabsList = computed(() => tabsViewStore.getTabsList);

// 缓存的路由组件列表
const keepAliveComponents = computed(() => keepAliveStore.list);

//watch
watch(
  () => route.fullPath,
  () => {
    // if (tabsList.value.some((n) => n.name === route.name)) return;
    //console.log(blackList, ' route');
    nextTick(() => {
      if (blackList.some((n) => n === route.name)) return;
      tabsViewStore.addTabs(getSimpleRoute(route));
      Storage.set("TABS_ROUTES", JSON.stringify(tabsList.value));
    });
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.tabs-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  justify-content: space-between;
  position: relative;

  .tab-left {
    display: flex;
    align-items: center;
    width: 100%;
  }

  ::v-deep(.anticon-close) {
    font-size: 12px;
    line-height: 22px;
  }

  :deep(.ant-tabs-tab) {
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.45);

    &:hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }

  :deep(.ant-tabs-tab-active) {
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.ant-tabs-tab-remove) {
    margin: 0;
    padding: 0;
    margin-left: 4px;
    font-size: 14px;
  }

  .open-tabs {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -20px;
    height: 20px;
    width: 30px;
    display: flex;
    z-index: 10;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);

    .iconfont {
      color: rgba(0, 0, 0, 0.45);
    }

    .iconfont:hover {
      color: rgba(0, 0, 0, 0.6);
    }

    .icon-a-doubledown {
      height: 28px;
    }

    .icon-a-doubleup {
      height: 28px;
    }
  }

}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
<style lang="less">
.ant-tabs {
  max-width: 100%;
}

.ant-tabs-nav {
  /* width: calc(100% - 152px); */
}

.tabs-container {
  .ant-tabs-tab {
    &:hover {
      .ant-tabs-tab-remove {
        display: block;
      }
    }

    .ant-tabs-tab-remove {
      display: none;
    }
  }

  .ant-tabs-tab-active {
    .ant-tabs-tab-remove {
      display: block;
    }
  }
}
</style>
